<script setup>
import { ref, computed } from 'vue'
import { getTableMeta } from '@/api/basic'
import Field from '@/modules/meta/Field.vue'
import { initRemoteValues } from '@/modules/utils/table.ts'
import tableData from '@/modules/test.json'

const form = ref({})
const tableConfig = ref({})
const tableMeta = ref([])
const source = 'table/Person.yaml'

getTableMeta({
  source: ''
}).then(async (res) => {
  await initRemoteValues(res.fields, source)
  tableMeta.value = res.fields
})

tableConfig.value = tableData

const showForm = (v) => {
  console.log(v)
  form.value = { name: 'xxxxxxx' }
}
</script>
<template>
  <div>
    <el-button @click="showForm">打开</el-button>
    <RevTableForm v-model="form" :meta="tableMeta" :config="tableConfig" />
  </div>
</template>
<style lang="less" scoped>
.table-form {
  table,
  tr,
  td {
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    white-space: pre-line;
  }
  .cell {
    width: 100%;
    height: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

    &.label {
      text-align: center;
    }
  }
}
</style>
